<template>
  <div>
    <a-table :columns="columns" :dataSource="userList" :customRow="rowclick" bordered>
      <a slot="detail">查看详情</a>
      <a-pagination v-model="current" :total="50" showLessItems />
    </a-table>
  </div>
</template>

<script>
export default {
  name: 'userList',
  data () {
    return {
      current: 1,
      columns: [
        {
          title: '人员ID',
          dataIndex: 'user_id',
          key: 'user_id'
        },
        {
          title: '姓名',
          dataIndex: 'name',
          key: 'name'
        },
        {
          title: '年龄',
          dataIndex: 'age',
          key: 'age'
        },
        {
          title: '操作',
          dataIndex: 'detail',
          key: 'detail',
          scopedSlots: { customRender: 'detail' }
        }
      ],
      userList: []
    }
  },
  created () {
    this.getUserList()
  },
  methods: {
    async getUserList () {
      const { data: res } = await this.$http.get('getUser')
      console.log(res)
      this.userList = res
    },
    // 点击详情按钮
    rowclick (record, index) {
      return {
        on: {
          click: () => {
            this.$store.commit('changeEditUserInfo', record)
            console.log(this.$store.state.editUserInfo)
            this.$router.push('/dashboard/userDetail')
            this.$store.commit('changeCurrent', 'userDetail')
          }
        }
      }
    }
  }
}
</script>

<style lang="less" scope>
</style>
